<template>
  <div>
    <div v-if="isChooseQrState && !disabled">
      <el-radio-group v-model="editCodeInfo.qrState" :disabled="disabled" @change="qrStateChange">
        <el-radio-button label="0">有二维码</el-radio-button>
        <el-radio-button label="1">无二维码</el-radio-button>
      </el-radio-group>
    </div>
    <div class="block-wrap" v-if="editCodeInfo.qrState == 0 && !disabled">
      <template v-for="item in codeInfoList">
        <div v-if="item.isShow" :key="item.id" class="block-item" :class="{ isSeleted: item.id == isSeleted }" @click="selectCode(item.id)">
          <svg-icon :icon-class="item.iconName" :class="{ isSvg: item.id == isSeleted }" />
          <div>{{ item.name }}</div>
        </div>
      </template>
    </div>
    <div class="seleted-code" v-if="editCodeInfo.activityName && editCodeInfo.qrState == 0">
      {{ `${codeOpt[+editCodeInfo.qrType]} : ${editCodeInfo.activityName}` }}
      <el-button v-if="!disabled" type="text" :style="disabled ? 'color: #999': '#082aff'" @click="deleteSeletedItem">删除</el-button>
    </div>
    <!-- 活码弹窗 -->
    <el-dialog :title="'选择' + codeOpt[+editCodeInfo.qrType]" :visible.sync="codeVisible" width="580px"
      :before-close="handleClose" :modal="false" append-to-body :close-on-click-modal="false">
      <div class="handle-query">
        <el-input v-model="staffName" :placeholder="codeType === 1 ? '请输入员工姓名' : '请输入活码名称'" clearable @change="handleQuery" style="width: 250px">
          <i slot="suffix" class="el-icon-search"></i>
        </el-input>
      </div>
      <el-table ref="multipleTable" :data="tableData" style="width: 100%" height="250" @select="handleSelectionChange" v-loading="loading"
        @select-all="selectAll">
        <el-table-column type="selection" align="center" width="55" />
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column v-if="codeType === 1" key="name" prop="name" label="员工姓名" align="center" />
        <el-table-column v-if="codeType !== 1" prop="activityName" label="二维码名称" align="center" show-overflow-tooltip />
        <template v-if="codeType === 2">
          <el-table-column key="userNames" prop="userNames" label="使用员工" align="center" show-overflow-tooltip />
          <el-table-column prop="guaranteeUserNames" label="兜底员工" align="center" show-overflow-tooltip />
        </template>
        <template v-if="codeType === 3">
          <el-table-column prop="groupWays" label="拉群方式" align="center">
            <template slot-scope="{ row }">
              <div v-if="+row.groupWays == 1">企微活码拉群</div>
              <div v-if="+row.groupWays == 2">个人群活码拉群</div>
              <div v-if="+row.groupWays == 3">标签拉群</div>
            </template>
          </el-table-column>
          <el-table-column key="userName" prop="userName" label="使用员工" align="center" show-overflow-tooltip />
        </template>
      </el-table>
      <NormalPagination :currentPage="pageQuery.pageNum" :pageSize="pageQuery.pageSize" :total="total"
        layout="total,sizes,prev,pager,next" :pagerCount="5" @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"></NormalPagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="info" plain @click="codeVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectedSureFn" style="color: #fff!important;" v-if="!disabled" :disabled="this.currentRow == null">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getQrCode, queryGroupCode, verbalList } from '@/api/communityOperating/Qrcode.js'

export default {
  name: 'NormalQrCode',
  props: {
    // 特殊情况可以自定义
    codeInfoList: {
      type: Array,
      default: () => [
        { id: 1, name: '员工码', iconName: 'staff', isShow: true },
        { id: 2, name: '渠道活码', iconName: 'channel', isShow: true },
        { id: 3, name: '群活码', iconName: 'qunhuoma', isShow: true },
      ]
    },
    codeOpt: {
      type: Array,
      default: () => ['', '员工码', '渠道活码', '群活码']
    },
    codeInfo: {
      type: Object,
      default: () => { }
    },
    // 是否需要选择控制有无二维码
    isChooseQrState: {
      type: Boolean,
      default: true,
    },
    // 详情时禁用
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      editCodeInfo: {
        qrState: 1,
        qrType: 1,
        qrCode: '',
        activityName: '',
        qrId: '',
      },
      staffName: '',
      pageQuery: {
        pageNum: 1,
        pageSize: 20
      },
      tableData: [],
      total: 20,
      codeType: 1,
      isSeleted: 1,
      codeVisible: false,
      seletedItem: null,
      currentRow: null,
      loading: false
    }
  },
  created() {
    this.editCodeInfo = JSON.parse(JSON.stringify(this.codeInfo))
    console.log(this.editCodeInfo, this.codeInfo, '初始化获取到的值')
    this.isSeleted = this.editCodeInfo.qrType;
    this.codeType = this.editCodeInfo.qrType;
  },
  watch: {
    codeInfo: {
      deep: true,
      handler(newValue,oldValue){
        this.editCodeInfo = JSON.parse(JSON.stringify(newValue))
      }
    }
  },
  methods: {
    // 是否有二维码
    qrStateChange() {
      if (this.editCodeInfo.qrState == '1') {
        this.editCodeInfo.qrType = null;
        this.editCodeInfo.qrCode = '';
        this.editCodeInfo.activityName = '';
        this.editCodeInfo.qrUrl = '';
        this.$emit('selectedSure')
      } else {
        this.editCodeInfo.qrType = 1;
        let data = {
          qrState: this.editCodeInfo.qrState,
          activityName: '',
          qrCode: '',
          qrId: '',
          qrType: 1,
        }
        this.isSeleted = 1
        this.codeType = 1
        this.$emit('selectedSure', data)
      }
    },
    // 选择活码
    async selectCode(type) {
      this.codeType = type
      this.handleQuery()
      this.codeVisible = true
    },
    // 关闭弹框
    handleClose() {
      this.codeVisible = false
      this.staffName = ''
      this.currentRow = null
    },
    handleSizeChange(val) {
      this.pageQuery.pageNum = 1
      this.pageQuery.pageSize = val
      this.handleQuery()
    },
    handleCurrentChange(val) {
      this.pageQuery.pageNum = val
      this.handleQuery()
    },
    async handleQuery() {
      let res = ''
      this.loading = true
      if (this.codeType == 3)
        res = await queryGroupCode({ ...this.pageQuery, activityName: this.staffName })
      if (this.codeType == 2)
        res = await verbalList({ ...this.pageQuery, activityName: this.staffName })
      if (this.codeType == 1)
        res = await getQrCode({ ...this.pageQuery, name: this.staffName })
      this.tableData = res.rows
      this.total = res.total
      this.loading = false
    },
    deleteSeletedItem() {
      this.staffName = ''
      this.currentRow = null
      this.seletedItem = null
      this.editCodeInfo.qrCode = '';
      this.editCodeInfo.activityName = '';
      this.editCodeInfo.codeUrl = '';
      this.$emit('deleteSeletedQrcode')
    },
    clearSeletedItem() {
      this.staffName = ''
      this.currentRow = null
      this.seletedItem = null
      this.editCodeInfo = {
        qrState: 0,
        qrType: '',
        qrCode: '',
        activityName: '',
        qrId: '',
      };
      this.isSeleted = null;
      this.codeType = null;
    },
    // 实现单选
    handleSelectionChange(val, row) {
      this.$refs.multipleTable.clearSelection() //清除选择
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.currentRow = row
    },
    // 清除全选
    selectAll() {
      this.$refs.multipleTable.clearSelection() //清除选择
    },
    // 确定
    selectedSureFn() {
      this.seletedItem = this.currentRow
      let qrCode = this.codeType == 3 ? this.seletedItem.codeUrl : this.seletedItem.qrCode;
      let qrId = this.codeType == 3 ? this.seletedItem.id : this.codeType == 2 ? this.seletedItem.qrId : this.seletedItem.userId;
      let activityName = this.codeType == 1 ? this.seletedItem.name : this.seletedItem.activityName;
      let configId = this.seletedItem?.configId
      let data = {
        qrState: this.editCodeInfo.qrState,
        activityName,
        qrCode,
        qrId,
        configId,
        qrType: this.codeType,
      }
      this.editCodeInfo = data;
      this.isSeleted = this.codeType
      this.$emit('selectedSure', data)
      this.codeVisible = false
      this.currentRow = null
      this.seletedItem = null
    },
  }
}
</script>
<style lang="scss" scoped>
@import "../styles/base.scss";

.block-wrap {
  margin-left: -10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-weight: 400;
  color: #2a2a2a;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;

  .block-item {
    width: 60px;
    padding: 5px 0;
    margin: 8px 10px 10px 10px;
    border: $normalBorder;
    text-align: center;
    box-sizing: border-box;
    border-radius: 2px;
    cursor: pointer;

    .svg-icon {
      width: 24px;
      height: 24px;
      fill: #999999;
      overflow: hidden;
    }

    div {
      margin-top: -10px;
    }
  }

  .isSeleted {
    border: 1px solid #082aff !important;
    color: #082aff !important;

    .isSvg {
      fill: #082aff !important;
      color: #082aff !important;
    }
  }
}

.handle-query {
  margin-bottom: 10px;
}

::v-deep .el-checkbox__inner {
  border-radius: 50% !important;
}

.table-page {
  text-align: right;
  height: 40px;
  margin-top: 15px;
}

.seleted-code {
  font-size: 11px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2a2a2a;
}</style>
